<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>   
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String contextPath = request.getContextPath();
%> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메뉴</title>
<link href="css/font.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#wrap{
		width: 260px;
	}
	#log{
		width:120px;
		height:30px;
		background:#2F4F4F;
		border:1px solid #ffffff;
		border-collapse:collapse;
		font-size:12px;
		text-decoration:none;
	}
	#log td{
		border:2px solid #ffffff;
	}
	#a{
		color:white;
		font-weight: bolder;
		font-family : "돋움";
	}
	#wrap td{
		text-align:center;
	}
	#c{
		font-family: nanum;
		font-size:15px;
		text-decoration:none;
		font-weight: bold;
	}
	#c:VISITED{
		color:#561313;
	}
	#c:HOVER{
		color:red;
	}
	.b{
		font-family: AmaticSC;
		font-size:30px;
		text-decoration:none;
		color:black;
		font-weight: bolder;
	}
	.b:HOVER{
		color:red;
	}
	.btn{
		width:60px;
		height:30px;
		background-color: #2F4F4F;
		font-family: "맑은 고딕";
		font-size:9pt;
		color:white;
		border: 0;
	}
</style>

<script type="text/javascript">
	
	var onclickedMenu="";  //클릭된 메뉴 변수
	
	//클릭시
	function changeTextColor(clickedMenu){
		document.getElementById("m_menu").style.color="black";
		document.getElementById("m_mall").style.color="black";
		document.getElementById("m_mem").style.color="black";
		document.getElementById("m_enjoy").style.color="black";
		document.getElementById("m_is").style.color="black";
		
		clickedMenu.style.color="#561313";
		onclickedMenu = clickedMenu.text;
	}
	
	//마우스오버시
	function showSubmenu(subId){
		
		if(subId=="subMenu1"){
			document.getElementById("subMenu1").style.display="";
			document.getElementById("subMenu2").style.display="none";
			document.getElementById("subMenu3").style.display="none";
			document.getElementById("subMenu4").style.display="none";
			document.getElementById("subMenu5").style.display="none";
		}else if(subId=="subMenu2"){
			document.getElementById("subMenu1").style.display="none";
			document.getElementById("subMenu2").style.display="";
			document.getElementById("subMenu3").style.display="none";
			document.getElementById("subMenu4").style.display="none";
			document.getElementById("subMenu5").style.display="none";
		}else if(subId=="subMenu3"){
			document.getElementById("subMenu1").style.display="none";
			document.getElementById("subMenu2").style.display="none";
			document.getElementById("subMenu3").style.display="";
			document.getElementById("subMenu4").style.display="none";
			document.getElementById("subMenu5").style.display="none";
		}else if(subId=="subMenu4"){
			document.getElementById("subMenu1").style.display="none";
			document.getElementById("subMenu2").style.display="none";
			document.getElementById("subMenu3").style.display="none";
			document.getElementById("subMenu4").style.display="";
			document.getElementById("subMenu5").style.display="none";
		}else if(subId=="subMenu5"){
			document.getElementById("subMenu1").style.display="none";
			document.getElementById("subMenu2").style.display="none";
			document.getElementById("subMenu3").style.display="none";
			document.getElementById("subMenu4").style.display="none";
			document.getElementById("subMenu5").style.display="";
		}
		
		if(subId=="check"){
			document.getElementById("check").style.display="none";
		}
		
		var noticeSub = document.getElementById(subId);
		noticeSub.setAttribute("style", "display:block");
	}
	function login() {
		alert('로그인 후 사용 가능합니다.');
		location.href='login.do'
	}
</script>
</head>
<body>

<table id="wrap">
	<tr>
		<td>
			<table id="log">
				<tr>
					<c:if test="${empty email}">
						<td><a href="<%=contextPath %>/login.do" id="a"><input type="button" value="LOGIN" class="btn" style="cursor: pointer"></a></td>
						<td><a href="<%=contextPath %>/insert.do" id="a"><input type="button" value="JOIN" class="btn" style="cursor: pointer"></a></td>
					</c:if>
					<c:if test="${!empty email}">
						<td>
							<form action="<%=contextPath %>/detail.do" method="POST">
								<input type="hidden" name="email" value="${email}">
								<c:if test="${email != 'admin'}">
									<input type="submit" value="MYPAGE" class="btn" style="cursor: pointer">
								</c:if>
							</form>
							<c:if test="${email == 'admin'}">
								<form action="<%=contextPath %>/memberList.do" method="POST">
									<input type="submit" value="ADMIN" class="btn" style="cursor: pointer">
								</form>
							</c:if>
						</td>
						<td><a href="<%=contextPath %>/logout.do" id="a"><input type="button" value="LOGOUT" class="btn" style="cursor: pointer"></a></td>
					</c:if>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td height="10"></td>
	</tr>
	<tr>
		<td width="130" height="80">
			<a href="<%=contextPath %>/item.do?typeNum=1" id="m_menu" class="b" onclick="changeTextColor(this);" onmouseover="showSubmenu('subMenu1');">MENU</a>
		</td>
		<td width="130">
			<div id="subMenu1" style="display:none;">
				<div>
					<a href="<%=contextPath %>/item.do?typeNum=1" id="c">전체 메뉴</a><br>
					<a href="<%=contextPath %>/itemDetail.do?typeNum=1" id="c">커피류</a><br>
					<a href="<%=contextPath %>/itemDetail.do?typeNum=2" id="c">비커피류</a><br>
					<a href="<%=contextPath %>/itemDetail.do?typeNum=3" id="c">베이커리</a>
				</div>
			</div>
		</td>
	</tr>
	<tr>
		<td height="80"><a href="#" id="m_mall" class="b" onclick="changeTextColor(this);" onmouseover="showSubmenu('subMenu2');">HAGGENNA <br>MALL</a></td>
		<td>
			<div id="subMenu2" style="display:none;">
				<div><a href="<%=contextPath %>/giftCardList.do" id="c">모바일 상품권</a></div>
				<div><a href="<%=contextPath %>/seminarInfo.do" id="c">세미나룸 예약</a></div>
			</div>
		</td>
	</tr>
	<tr>
		<td height="80"><a href="#" id="m_mem" class="b" onclick="changeTextColor(this);" onmouseover="showSubmenu('subMenu3');">MEMBERSHIP</a></td>
		<td>
			<div id="subMenu3" style="display:none;">
				<div><a href="<%=contextPath%>/membership.do" id="c">이용안내</a></div>
				<c:if test="${empty email}">
					<div><a href="<%=contextPath%>/login.do" id="c" onclick="login()">고객센터</a></div>
				</c:if>
				<c:if test="${!empty email}">
					<div><a href="<%=contextPath%>/serviceInput.do" id="c">고객센터</a></div>
				</c:if>
			</div>
		</td>
	</tr>
	<tr>
		<td height="80"><a href="#" id="m_enjoy" class="b" onclick="changeTextColor(this);" onmouseover="showSubmenu('subMenu4');">ENJOY</a></td>
		<td>
			<div id="subMenu4" style="display:none;">
				<div>
					<form>
						<a href="<%=contextPath%>/gameForm.do?count=0" id="c">게임</a>
					</form>
				</div>
				<div><a href="<%=contextPath%>/boardList.do" id="c">후기</a></div>
			</div>
		</td>
	</tr>
	<tr>
		<td height="80"><a href="#" id="m_is" class="b" onclick="changeTextColor(this);" onmouseover="showSubmenu('subMenu5');">HAGGENNA IS</a></td>
		<td>
			<div id="subMenu5" style="display:none;">
				<div><a href="<%=contextPath%>/info.do" id="c">HAGGENNA 소개</a></div>
				<div><a href="<%=contextPath%>/branch.do?branchNum=1" id="c">매장소개</a></div>
			</div>&nbsp;
		</td>
	</tr>
</table>
</body>
</html>